<template>
<div>
  <van-search
      shape="round"
      v-model="value"
      placeholder="请输入搜索关键词"
      @search="onSearch"
  >
    <template #left-icon>
      <van-icon class="leftIcon" size=".7rem" name="scan" color="#FF5000" />
    </template>
    <template #right-icon>
      <div class="flex">
        <van-icon v-show="value===''" class="rightIcon" size=".7rem" name="photo-o" color="#999999" />
        <div class="button" @click="onSearchClick">搜索</div>
      </div>
    </template>
  </van-search>
</div>
</template>

<script>
import Vue from 'vue';
import { Search,Icon,Toast } from 'vant';

Vue.use(Icon);
Vue.use(Search);
Vue.use(Toast);
export default {
name: "search",
  props:{
  isBack:{
    type:Boolean,
    default:false
  }
  },
  data() {
    return {
      value: '',
    };
  },
  methods: {
    onSearch(val) {
      Toast(val)
    },
    onSearchClick(){
      Toast(this.value)
    }
  },
}
</script>

<style scoped>
.van-search{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: #F4F4F4;
}

.van-search__content{ /*input搜索框*/
  border: .05rem solid #FF5000;
}
.van-cell{
  padding: 0;
}
.leftIcon{
  margin-top: .2rem;
}
.rightIcon{
  margin: .2rem .2rem 0 0;
}
.button{
  margin-bottom: -.05rem;
  display: block;
  border-radius: .5rem;
  color: #fff;
  padding: .2rem .6rem;
  background: linear-gradient(to right,#FF8A0D, #FF5301);
  font-size: .4rem;
}
</style>